<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>异清轩博客栏目页面</title>

    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <link href="js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="js/ele-2.15.7/index.js"></script>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/nprogress.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="apple-touch-icon-precomposed" href="images/icon/icon.png">
    <link rel="shortcut icon" href="images/icon/favicon.ico">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/nprogress.js"></script>
    <script src="js/jquery.lazyload.min.js"></script>

    <script src="../../../../../login-starter/src/main/resources/static/js/login.js"></script>
    <script src="js/blog.js"></script>
</head>

<body class="user-select">
<div id="app">
    <mymain>
        <section class="container">
            <div class="content-wrap">
                <div class="content">
                    <div class="title">
                        <h3>{{list[0].article.name}}</h3>
                    </div>
                    <div v-for="(a , index ) in list">
                    <article class="excerpt excerpt-1">
                        <a class="focus" :href="'article.html?id=' + a.article.id " title="">
                            <img v-if="a.article.titleImgs"
                                 class="thumb"
                                 data-original="images/excerpt.jpg"
                                 :src="a.article.titleImgs"
                                 alt=""
                            >
                            <img v-else
                                 class="thumb"
                                 data-original="images/excerpt.jpg"
                                 src="images/excerpt.jpg"
                                 alt=""
                            >
                        </a>
                        <header>
                            <a class="cat" :href="'article.html?id=' + a.article.id ">{{a.article.name}}<i></i></a>
                            <h2>
                                <a :href="'article.html?id=' + a.article.id " title="">{{a.article.title}}</a>
                            </h2>
                        </header>
                        <p class="meta">
                            <time class="time"><i class="glyphicon glyphicon-time"></i> {{a.createTime}}</time>
                            <span class="views"><i class="glyphicon glyphicon-eye-open"></i> 共{{a.article.readCnt}}人围观</span>
                            <a class="comment" href="article.html#comment">
                                <i class="glyphicon glyphicon-comment"> </i>
                                0个不明物体
                            </a>
                        </p>
                        <div class="hide_note" v-html="a.article.content" style="display: none"></div>
                    </article>
                    </div>
                    <div class="block">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[2, 4, 5]"
                                :page-size="pagesize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="list[0].total">
                        </el-pagination>
                    </div>
                    <nav class="pagination" style="display: none;">
                        <ul>
                            <li class="prev-page"></li>
                            <li class="active"><span>1</span></li>
                            <li><a href="?page=2">2</a></li>
                            <li class="next-page"><a href="?page=2">下一页</a></li>
                            <li><span>共 2 页</span></li>
                        </ul>
                    </nav>
                </div>
            </div>
            <aside class="sidebar">
                <div class="fixed">
                    <div class="widget widget_search">
                        <form class="navbar-form" action="/Search" method="post">
                            <div class="input-group">
                                <input type="text" name="keyword" class="form-control" size="35"
                                       placeholder="请输入关键字"
                                       maxlength="15" autocomplete="off">
                                <span class="input-group-btn">
            <button class="btn btn-default btn-search" name="search" type="submit">搜索</button>
            </span></div>
                        </form>
                    </div>
                    <div class="widget widget_sentence">
                        <h3>每日一句</h3>
                        <div class="widget-sentence-content">
                            <h4>2016年01月05日星期二</h4>
                            <p>Do not let what you cannot do interfere with what you can do.<br/>
                                别让你不能做的事妨碍到你能做的事。（John Wooden）</p>
                        </div>
                    </div>
                </div>
                <div class="widget widget_hot">
                    <h3>热门文章</h3>
                    <ul>
                        <li><a href=""><span class="thumbnail"><img class="thumb" data-original="images/excerpt.jpg"
                                                                    src="images/excerpt.jpg" alt=""></span><span
                                class="text">php如何判断一个日期的格式是否正确</span><span class="muted"><i
                                class="glyphicon glyphicon-time"></i> 2016-1-4 </span><span class="muted"><i
                                class="glyphicon glyphicon-eye-open"></i> 120</span></a></li>
                        <li><a href=""><span class="thumbnail"><img class="thumb" data-original="images/excerpt.jpg"
                                                                    src="images/excerpt.jpg" alt=""></span><span
                                class="text">php如何判断一个日期的格式是否正确</span><span class="muted"><i
                                class="glyphicon glyphicon-time"></i> 2016-1-4 </span><span class="muted"><i
                                class="glyphicon glyphicon-eye-open"></i> 120</span></a></li>
                        <li><a href=""><span class="thumbnail"><img class="thumb" data-original="images/excerpt.jpg"
                                                                    src="images/excerpt.jpg" alt=""></span><span
                                class="text">php如何判断一个日期的格式是否正确</span><span class="muted"><i
                                class="glyphicon glyphicon-time"></i> 2016-1-4 </span><span class="muted"><i
                                class="glyphicon glyphicon-eye-open"></i> 120</span></a></li>
                        <li><a href=""><span class="thumbnail"><img class="thumb" data-original="images/excerpt.jpg"
                                                                    src="images/excerpt.jpg" alt=""></span><span
                                class="text">php如何判断一个日期的格式是否正确</span><span class="muted"><i
                                class="glyphicon glyphicon-time"></i> 2016-1-4 </span><span class="muted"><i
                                class="glyphicon glyphicon-eye-open"></i> 120</span></a></li>
                        <li><a href=""><span class="thumbnail"><img class="thumb" data-original="images/excerpt.jpg"
                                                                    src="images/excerpt.jpg" alt=""></span><span
                                class="text">php如何判断一个日期的格式是否正确</span><span class="muted"><i
                                class="glyphicon glyphicon-time"></i> 2016-1-4 </span><span class="muted"><i
                                class="glyphicon glyphicon-eye-open"></i> 120</span></a></li>
                    </ul>
                </div>
            </aside>
        </section>
    </mymain>
</div>

<script>
    var v = new Vue({
        el: "#app",
        data: {
            list: {
            },
            currentIndex: '',
            pagesize: 2,
            currentPage: 1,
            total:0,
        },
        methods: {
            handleSizeChange(val) {
                this.pagesize = val;
                console.log(`每页 ${val} 条`);
                this.queryArticleById();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                console.log(`当前页: ${val}`);
                this.queryArticleById();
            },
            // 根据栏目进行分页
            queryArticleById(){
                axios.get("/blog/article/selectPageById" + location.search,{
                    params:{
                        currentPage : this.currentPage,
                        pagesize : this.pagesize,
                    }
                }).then(res=>{
                    if(res.data.code){
                        console.log(res.data.data)
                        this.list = res.data.data;
                        //下次渲染事件监听
                        this.$nextTick(()=>{
                            let hds = document.querySelectorAll(".hide_note");
                            hds.forEach(hd=>{
                                let text = hd.innerText.length > 50 ? hd.innerText.substring(0,50) + "..." : hd.innerText;
                                hd.previousElementSibling.innerHTML = text;
                            })
                        });
                    }
                })
            }
        },
        created() {
            this.queryArticleById();
        }
    })
</script>

<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.ias.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>